<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function testFn1(value) {
        const dom = document.getElementById("p");
        dom.innerText += value;
      }
    </script>
  </head>
  <body>
    <!-- 
    1. 在 HTML 中，js 代码一般在 script 元素中定义
    <script>
      const dom = document.getElementById('App')
    </script>

    或者通过 script 引用外部 js 文件
    <script src="test.js" ></script>
      
    在旧版本中（IE8及以下版本），还可以通过 type 来指定 js 文件的类型。在 html5 版本中，若未设置 type，则默认 type="text/javascript"
    <script src="test.js" type="text/javascript"></script>

    
    
  -->

    <p id="p">段落</p>
    <button onclick="testFn1(1)">点击1</button>
    <button onclick="testFn2(2)">点击2</button>

    <script>
      function testFn2(value) {
        const dom = document.getElementById("p");
        dom.innerText += value;
      }
    </script>

    <!-- 
        1. 可以在 html 文档中放置任意数量的脚本；
        2. 可以放置在 <body>,<head> 中，但是两者在网页性能上的影响不同。因为浏览器解析 html 是从上到下的，如果放置在 head 中的 js 文件过大，那么会阻塞 dom 解析。
    -->
  </body>
</html>
